<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<uv-skeletons :loading="pageLoading" :skeleton="skeleton"></uv-skeletons>
	<template v-if="!pageLoading">
		<view class="shopCenter-info" v-if="storeInfo">
			<view class="shopCenter-head">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
					<swiper-item class="swiper-img-item" v-for="(item,index) in storeInfo.imageList" :key="index">
						<image @click="previewImage(storeInfo.imageList,index)" :src="item" class="img-item"
							mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 比赛 -->
			<!-- 			<view class="game-content flex-center w100">
				<view class="game-item">
					<image src="../../static/user/vip_bg.png" class="game-img" mode="aspectFill"></image>
					<view class="game-head w100 flex-row-center">
						<view class="state-box flex-row-center">
							<image src="/static/user/vip_icon.png" class="icon" mode=""></image>
							<text class="name">初级</text>
						</view>
					</view>
					<view class="game-footer w100 flex">
						<text class="game-name">刺激有惊喜那得活动</text>
						<view class="footer-bottom flex-row-center">
							<view class="time-box flex-row-center">
								<up-icon name="calendar-fill" color="#79DED3" size="32rpx"></up-icon>
								<text class="name">2024-12-23</text>
							</view>
							<view class="num-box flex-row-center">
								<up-icon name="home-fill" color="#79DED3" size="32rpx"></up-icon>
								<text class="name"></text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 商家信息 -->
			<view class="shop-info-box flex">
				<view class="info-box flex">
					<image :src="storeInfo.icon" v-if="storeInfo.icon" class="shop-ava" mode="aspectFill"></image>
					<image :src="storeInfo.background_image" v-else class="shop-ava" mode="aspectFill"></image>
					<view class="shop-info">
						<view class="name-box flex-row-center">
							<text class="name">{{storeInfo.store_name}}</text>
							<up-icon name="home-fill" color="#79DED3" size="32rpx"></up-icon>
						</view>
						<!-- 地址 -->
						<view class="address-box flex">
							<view class="icon">
								<up-icon name="map" color="#A1A2A3" size="24rpx"></up-icon>
							</view>
							<text class="address">{{storeInfo.address}}</text>
						</view>
					</view>
				</view>
				<!-- 导航 -->
				<view class="navigation-box flex-center">
					<image src="@/static/activity/navigation_icon.png" @click="openMap(storeInfo.lat,storeInfo.long)"
						class="navigation_icon">
					</image>
				</view>
			</view>

		</view>
		<view class="main flex w100">

			<!-- tab列表 -->
			<up-sticky offset-top="0">
				<view class="tab-box">
					<up-tabs :activeStyle="{
								'fontWeight': 'bold',
								'fontSize': '30rpx',
								'color': '#fff'
							}" lineColor="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" :inactiveStyle="{
							 	'fontWeight': 500,
							 	'fontSize': '30rpx',
							 	'color': '#9A9B9C'
							 }" :list="tabList" :current="contentIndex" @change="changeTab"></up-tabs>
				</view>
			</up-sticky>
			<!-- 内容 -->
			<view class="shop-content" v-if="storeInfo">
				<swiper class="swiper-content" @change="changeSwiper" :current="contentIndex">
					<!-- 组队 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="getMoreGroup">
							<view class="content-team w100">
								<template v-if="teamInfo.list.length>0">
									<storeteamItemVue :teamInfo="item" v-for="(item,index) in teamInfo.list"
										:key="item.t_id"></storeteamItemVue>
									<view class="view-more">
										<up-loadmore :status="teamInfo.status" />
									</view>
								</template>
								<view class="not-list-view" v-else>
									<text class="text">暂无组队数据~</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 详情 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="shop-tag flex-row-center" v-if="storeInfo.narrate&&storeInfo.narrate.length>0">
								<view class="tap-item" v-for="(item,index) in storeInfo.narrate" :key="index">
									<up-tag :text="item" size="mini" type="warning"></up-tag>
								</view>
							</view>
							<view class="shop-details flex-row-center">
								<text class="name">营业时间：</text>
								<text v-if="storeInfo.is24Hr&&storeInfo.is24Hr===1" class="details">全天营业</text>
								<text v-else class="details">{{storeInfo.business_start_hours}} ~
									{{storeInfo.business_end_hours}}</text>
							</view>
							<view class="shop-details" id='swiperCon0' v-if="storeInfo.description">
								<text class="name">简介：</text>
								<text class="details">{{storeInfo.description}}</text>
							</view>
						</scroll-view>
					</swiper-item>

					<!-- 比赛 -->
					<!-- 		<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="content-team w100">
								<template v-if="matchInfo.list.length>0">
									<activityItem></activityItem>
									<view class="view-more">
										<up-loadmore :status="matchInfo.status" />
									</view>
								</template>
								<view class="not-list-view" v-else>
									<text class="text">暂无比赛数据~</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item> -->
				</swiper>
			</view>
		</view>
		<view class="footer-box w100 flex-row-center" @click="toLogin" v-if="!userInfo">
			<view class="login-btn flex-center">
				<text class="text">立即登录</text>
			</view>
		</view>
	</template>
</template>

<script setup>
	import storeteamItemVue from '../components/storeteamItem.vue';
	import matchContentVue from '@/components/userCenter/matchContent.vue';
	import activityItem from '@/components/activity/activityItem.vue'
	import {
		userInfoStore
	} from '@/stores/user';
	import {
		inviteInfoStore
	} from '@/stores/inviteInfo';
	import {
		getLocationInf
	} from '@/utils/getLocation.js';
	import {
		formatDate,
		isMillisecondTimestamp,
		compareTime,
		maskPhoneNumber,
		parseURLParams3,
		countDown
	} from '@/utils/utools.js';
	const skeleton = [{
			type: 'custom',
			style: 'width: 750rpx;height:478rpx;'
		},
		{
			type: 'line',
			num: 1,
			style: 'margin: 24rpx auto;width:680rpx;'
		}, {
			type: 'flex',
			style: 'width:680rpx;margin:24rpx auto;',
			children: [{
				type: 'avatar',
				num: 1,
				style: 'marginRight: 10rpx;width: 48rpx;height: 48rpx;'
			}, {
				type: 'line',
				num: 1,
				style: 'marginRight: 10rpx;height: 48rpx;'
			}]
		},
		{
			type: 'custom',
			style: 'width: 680rpx;height:120rpx;border-radius:12rpx;margin: 18rpx auto;'
		},
		{
			type: 'flex',
			style: 'margin:24rpx 0;marginLeft:35rpx;',
			children: [{
				type: 'line',
				style: 'width: 48rpx;marginRight:24rpx;'
			}, {
				type: 'line',
				style: 'width: 48rpx;marginRight:24rpx;'
			}, {
				type: 'line',
				style: 'width: 48rpx;'
			}]
		},
		{
			type: 'flex',
			style: 'width:680rpx;margin:24rpx auto;',
			children: [{
				type: 'line',
				num: 3,
				gap: '20rpx',
				style: ['width: 680rpx;marginBottom: 12rpx;', 'width: 680rpx;marginBottom: 12rpx;',
					'width: 280rpx;'
				],
			}]
		}
	]
	const pageLoading = ref(true);
	const userStore = userInfoStore();
	const inviteStore = inviteInfoStore();
	const addressInfo = ref(computed(() => userStore.addressInfo));
	const userInfo = ref(computed(() => userStore.userInfo));
	const emit = defineEmits(['changeItem']);
	const contentIndex = ref(0);
	let tabChooseList = [0];
	const status = ref('loading');
	const storeId = ref(0);
	const storeInfo = ref(null);
	const teamInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	});
	const matchInfo = reactive({
		list: [1],
		status: 'loadmore',
		pageSize: 1
	});
	const shareShow = ref(false);
	const sharePopup = ref(null);
	const tabList = [{
			name: '组队'
		}, {
			name: '详情'
		},

	]
	onLoad(async (option) => {
		console.log('usercanshu', option);
		if (option.storeId) {
			storeId.value = option.storeId;
			if (userStore.addressInfo) {
				getStoreDetails(option.storeId);
			} else {
				uni.showLoading({
					title: '获取定位中'
				})
				const res = await getLocationInf()
				if (res.address) {
					setTimeout(() => {
						uni.hideLoading()
					}, 600);
					userStore.addressInfo = res;
					getStoreDetails(option.storeId);
				}
			}
		}
		if (option.i && option.t) {
			inviteStore.setInviteInfo(option.i, option.t);
			// inviteCode.value = option.i;
		}
		if (option.scene) { //小程序码分享
			let url = '?' + decodeURIComponent(option.scene);
			let parameter = parseURLParams3(url);
			console.log('小程序码分享门店参数', parameter);
			inviteStore.setInviteInfo(parameter.i, parameter.t);
			storeId.value = parameter.d;
			if (userStore.addressInfo) {
				getStoreDetails(parameter.d);
			} else {
				uni.showLoading({
					title: '获取定位中'
				})
				const res = await getLocationInf();
				if (res.address) {
					setTimeout(() => {
						uni.hideLoading()
					}, 600);
					userStore.addressInfo = res;
					getStoreDetails(parameter.d);
				}
			}
		}
	})
	onMounted(async () => {

	});
	onUnload(() => {
		// userStore.setStoreShop(null);
	});
	onPullDownRefresh(async () => {
		pageLoading.value = true;
		uni.showLoading({
			title: '刷新中'
		})
		tabChooseList = [0];
		contentIndex.value = 0;
		teamInfo.list = [];
		teamInfo.status = 'loadmore';
		teamInfo.pageSize = 1;
		await getStoreDetails(storeId.value);
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 800)
	});
	const getStoreDetails = async (id) => {
		const res = await $Api.store.getStoreDetails({
			id,
			lat: addressInfo.value.latitude,
			lng: addressInfo.value.longitude
		});
		uni.hideLoading();
		if (res.code === 1) {
			if (res.data) {
				let imageList = [];
				let is24Hr = 0; //是否24小时营业
				if (res.data.juli) {
					res.data.juli = parseFloat(res.data.juli).toFixed(2)
				}
				if (res.data.banner_image) {
					if (typeof res.data.banner_image === 'string') {
						imageList = res.data.banner_image.split(',');
					} else if (Array.isArray(res.data.banner_image)) {
						res.data.banner_image.forEach(item => {
							imageList.push(item.url);
						})
					}
				}
				if (res.data.narrate) {
					res.data.narrate = res.data.narrate.split(',');
				}
				if (res.data.business_start_hours && res.data.business_end_hours) {
					//  dayjs(res.data.business_start_hours).isSame(dayjs(res.data.business_end_hours))
					if (res.data.business_start_hours === res.data.business_end_hours) {
						is24Hr = 1
					}
				}
				storeInfo.value = {
					...res.data,
					imageList,
					is24Hr

				};
				pageLoading.value = false;
				console.log('storeInfo.value', storeInfo.value, res.data);
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const getMoreGroup = () => {
		if (teamInfo.status === 'loading' || teamInfo.status === 'nomore') return;
		teamInfo.status = 'loading';
		setTimeout(() => {
			getStoreTeam();
		}, 600)
	}
	const getStoreTeam = async () => { //获取门店组队
		const res = await $Api.store.getuserStoreTeam({
			id: storeId.value,
			page: teamInfo.pageSize
		});
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let fristName = '北';
					let countDownInfo = {
						status: -1,
						timeInfo: {}
					}
					if (val.image) {
						if (typeof val.image === 'string') {
							imageList = val.image.split(',');
						} else if (Array.isArray(val.image)) {
							val.image.forEach(item => {
								imageList.push(item.url);
							})
						}
					};
					if (val.nickname) {
						fristName = val.title.charAt(0)
					}
					countDownInfo = computeDate(val.start_date, val.end_date)
					return {
						...val,
						imageList: imageList,
						fristName,
						countDownInfo
					}
				})
				teamInfo.list = [...teamInfo.list, ...arr];
				console.log('teamInfo.list', teamInfo.list);
			}
			if (res.data.totalPage && res.data.totalPage > teamInfo.pageSize) {
				teamInfo.status = 'loadmore';
				teamInfo.page++;
			} else {
				teamInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}

	}
	const changeTab = async (e) => {
		contentIndex.value = e.index;
	}
	const changeSwiper = (e) => {
		let {
			current
		} = e.detail;
		contentIndex.value = current;
		if (tabChooseList.includes(current)) return; //判断是否已经加载过了
		tabChooseList.push(current);
		if (current === 1) { //组队
			getStoreTeam();
		}
	}
	const computeDate = (startDate, endDate) => {
		if (!isMillisecondTimestamp(startDate)) { //判断毫秒级时间戳
			startDate = startDate * 1000
		}
		if (!isMillisecondTimestamp(endDate)) { //判断毫秒级时间戳
			endDate = endDate * 1000
		}
		let newDate = new Date().getTime();
		if (newDate > endDate) { //已经结束
			return {
				status: -1,
				timeInfo: {}
			}
		} else if (newDate > startDate && newDate <= endDate) { //进行中，距结束多少时间
			let obj = {}
			obj = countDown(endDate);
			return {
				status: 1,
				...obj
			}
		} else if (newDate <= startDate) { //未开始 距开始多少时间
			let obj = {}
			obj = countDown(startDate);
			return {
				status: 2,
				...obj
			}
		}
	}
	const filterBase64 = (codeImages) => {
		return 'data:image/png;base64,' + codeImages.replace(/[\r\n]/g, "");
	}
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	const openMap = (latitude = 30.615869, longitude = 104.067839) => { //打开地图
		uni.openLocation({
			latitude: parseFloat(latitude),
			longitude: parseFloat(longitude),
			name: storeInfo.value.store_name,
			address: storeInfo.value.address,
			success: function(res) {
				console.log('打开系统位置地图成功')
			},
			fail: function(error) {
				console.log(error)
			}
		})
	}
	onShareAppMessage((res) => {
		if (res.from === 'button') { // 来自页面内分享按钮
			return {
				title: '快来加入我们吧',
				path: 'pages/login/register?t=2' + '&i=' + storeInfo.value.invite_code //t-1 用户 t-2 商户
			}
		}
		return {
			title: '快来加入我们吧',
			path: 'pages/login/register?t=2' + '&i=' + storeInfo.value.invite_code //t-1 用户 t-2 商户
		}
	})
	onShareTimeline((res) => {
		return {
			title: '快来加入我们吧',
			path: 'pages/login/register?t=2' + '&i=' + storeInfo.value.invite_code //t-1 用户 t-2 商户
		}
	});
	const previewImage = (list, index) => { //预览图片
		previewImg(list, index);
	}
</script>
<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.shopCenter-box {
		height: 100vh;
		box-sizing: border-box;
		flex-direction: column;
	}

	.swiper {
		width: 100%;
		height: 425rpx;

		.swiper-img-item {
			width: 100%;
			height: 100%;

			.img-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	.shop-info-box {
		padding: 26rpx 40rpx;
		justify-content: space-between;

		.shop-ava {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 24rpx;
		}

		.shop-info {
			.name-box {
				.name {
					font-weight: bold;
					font-size: 34rpx;
					color: #E1E1E2;
					margin-right: 10rpx;
					max-width: 520rpx;
					text-overflow: ellipsis;
					white-space: nowrap;
					lines: 1;
					overflow: hidden;
				}
			}

			.address-box {
				margin-top: 18rpx;
				align-items: flex-start;

				.icon {
					margin-top: 6rpx;
				}

				.address {
					font-weight: 500;
					font-size: 24rpx;
					color: #A1A2A3;
					margin-left: 10rpx;
				}
			}
		}

		.navigation-box {
			margin-left: 12rpx;

			.navigation_icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.main {
		flex-direction: column;
		height: 100vh;
	}

	.tab-box {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: #111416;
	}

	.shop-content {
		width: 100%;
		box-sizing: border-box;
		flex: 1;

		.swiper-content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;

			.swiper-content-item {
				width: 100%;
				padding: 32rpx 20rpx;
				box-sizing: border-box;
				height: 100%;
			}
		}

	}

	.shop-tag {
		flex-wrap: wrap;
		margin-bottom: 24rpx;

		.tap-item {
			margin-right: 12rpx;
			margin-top: 12rpx;
		}
	}

	.shop-details {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 24rpx;

		.name {
			display: block;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 38rpx;
			color: #CACBCB;
			margin-bottom: 12rpx;
		}

		.details {
			font-weight: 500;
			font-size: 24rpx;
			color: #9B9C9D;
			line-height: 28rpx;
		}
	}

	.content-team {
		height: 100%;
		box-sizing: border-box;
		padding-bottom: 220rpx;
	}

	// 活动item
	.game-content {
		border-top: 8rpx solid #111416;
		border-bottom: 8rpx solid #111416;
		padding: 24rpx 0;

		.game-item {
			width: 420rpx;
			height: 260rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			position: relative;
			overflow: hidden;
			padding: 24rpx;
		}

		.game-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: -1;
		}

		.game-head {
			justify-content: flex-end;

			.state-box {
				.icon {
					width: 32rpx;
					height: 32rpx;
				}

				height: 42rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 21rpx;
				padding: 0 14rpx;
				margin-right: 16rpx;

				.name {
					font-weight: 500;
					font-size: 24rpx;
					color: #B3C0CA;
					margin-left: 8rpx;
				}
			}
		}

		.game-footer {
			flex-direction: column;
			padding: 24rpx 36rpx;
			color: #E9E6E4;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1;
			background: linear-gradient(180deg, transparent, #191C1F);

			.footer-bottom {
				justify-content: space-between;
			}

			.game-name {
				font-size: 32rpx;
				font-weight: bold;
				width: 240rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.name {
				font-size: 26rpx;
				margin-left: 12rpx;
			}

			.time-box {}
		}
	}

	.footer-box {
		justify-content: flex-end;
		background-color: #111416;
		position: fixed;
		left: 0;
		bottom: env(safe-area-inset-bottom);
		z-index: 9;
		height: 120rpx;
		padding: 36rpx;
		box-shadow: 0rpx 0 16rpx 2rpx rgba(108, 199, 190, 0.38);

		.login-btn {
			width: 160rpx;
			height: 68rpx;
			border-radius: 12rpx;
			box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
			background: $btn-bg-color;

			.text {
				font-size: 32rpx;
				font-weight: bold;
				color: $btn-text-color;
			}

		}

	}
</style>